<template>
  <div class="details">
    <div class="relation-phone common down-line">
      <span class="tab">
        <van-icon name="phone-circle-o" />
        <span>电话</span>
      </span>
      ：<span style="color: #e47105">xxxxxxxxx</span>
    </div>
    <div class="announcement common down-line">
      <span>
        <div>
          <span class="tab">
            <van-icon name="notes-o" />
            <span>公告</span> </span
          >：美味的邂逅, 浪漫的气息~
        </div>
        <div>明月阁西餐厅 (22年10月10日) 正式试业</div>
        <div>欢迎同学们光临~</div>
        <div>地址: 明圆食堂三楼 (电梯直达)</div>
        <div>试业期间所有顾客赠送精美西式浓汤一份</div>
      </span>
    </div>
    <div class="address common down-line">
      <span class="tab">
        <van-icon name="location-o" />
        <span>地址</span> </span
      >： 端州区广东工商职业技术大学(星湖校区)紫荆公寓
    </div>
    <div class="address-details common down-line">
      <span class="tab">详细地址</span>：工商大学明园饭堂三楼
    </div>
    <div class="business-time common">
      <span class="tab">营业时间</span>： 10:30-22:30
    </div>
  </div>
</template>

<script>
export default {
  name: "myDetails",
  data() {
    return {
      announcement_content:
        "<p>明月阁西餐厅 (22年10月10日) 正式试业</p><p>欢迎同学们光临~</p><p>地址: 明圆食堂三楼 (电梯直达) </p><p>试业期间所有顾客赠送精美西式浓汤一份</p>",
    };
  },
};
</script>

<style lang="scss" scoped>
.details {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 14px;

  // .announcement {
  //   padding: 10px 0;
  // }
}
.down-line {
  border-bottom: 1px solid #ccc;
}
.common {
  padding: 15px 5px;
  background-color: #fff;
  // flex: 1;
  // display: flex;
  // align-items: center;

  .tab {
    display: inline-block;
    width: 65px;
    text-align-last: justify;
  }
}
</style>
